<script setup>
import { ref, reactive, inject, watch } from "vue";
import {
  NNumberAnimation,
  NStatistic,
  NSpin,
  NSkeleton,
  NPagination,
} from "naive-ui";
import { findComment, findGoodsCommentList } from "@/api/product";

const numberAnimationInstRef = ref(null);
numberAnimationInstRef.value?.play();

let loading = ref(true);
let commentInfo = ref([]);
let commentList = ref([]);
const goods = inject("goods");
const currentIndex = ref(0);
// 准备筛选条件数据
const reqParams = reactive({
  page: 1,
  pageSize: 10,
  hasPicture: null,
  tag: null,
  sortField: null,
});

findComment(goods.value.id).then((res) => {
  commentInfo.value = res;
  commentInfo.value.tags.unshift({
    title: "有图",
    tagCount: res.hasPictureCount,
    type: "img",
  });
  commentInfo.value.tags.unshift({
    title: "全部评论",
    tagCount: res.evaluateCount,
    type: "all",
  });
  loading.value = false;
});

const changeTag = (index) => {
  currentIndex.value = index;
  const tag = commentInfo.value.tags[index];
  if (tag.type === "all") {
    reqParams.hasPicture = null;
    reqParams.tag = null;
  } else if (tag.type === "img") {
    reqParams.hasPicture = true;
    reqParams.tag = null;
  } else {
    reqParams.hasPicture = null;
    reqParams.tag = tag.title;
  }
  reqParams.page = 1;
};

const changeParams = (sort) => {
  reqParams.sortField = sort;
  reqParams.page = 1;
};

const formatNickname = (nickname) => {
  return nickname.substr(0, 1) + "****" + nickname.substr(-1);
};

watch(
  reqParams,
  () => {
    loading.value = true;
    findGoodsCommentList(goods.id, reqParams).then((res) => {
      commentList.value = res;
      loading.value = false;
    });
  },
  {
    immediate: true,
  }
);

const changePage = (val) => {
  reqParams.page = val;
};
</script>

<template>
  <transition>
    <n-spin :show="loading">
      <div v-if="!commentInfo">
        <n-skeleton height="600px" width="1240px" />
      </div>
      <div class="goods-comment" v-else>
        <div class="head">
          <div class="data">
            <p>
              <span>{{ commentInfo.salesCount }}</span
              ><span>人购买</span>
            </p>
            <p>
              <span>{{ commentInfo.praisePercent }}</span
              ><span>好评率</span>
            </p>
          </div>
          <div class="tags">
            <div class="dt">大家都在说：</div>
            <div class="dd">
              <a
                href="javascript:;"
                :class="{ active: currentIndex === i }"
                v-for="(item, i) in commentInfo.tags"
                :key="i"
                @click="changeTag(i)"
                >{{ item.title }} ({{ item.tagCount }})</a
              >
            </div>
          </div>
        </div>
        <div class="sort" v-if="commentList.pages > 0">
          <span>排序：</span>
          <a
            href="javascript:;"
            @click="changeParams(null)"
            :class="{ active: reqParams.sortField === null }"
            >默认</a
          >
          <a
            href="javascript:;"
            @click="changeParams('createTime')"
            :class="{ active: reqParams.sortField === 'createTime' }"
            >最新</a
          >
          <a
            href="javascript:;"
            @click="changeParams('praiseCount')"
            :class="{ active: reqParams.sortField === 'praiseCount' }"
            >最热</a
          >
        </div>
        <div class="list">
          <div class="list">
            <div
              class="item"
              v-for="(item, index) in commentList.items"
              :key="index"
            >
              <div class="user">
                <img :src="item.member.avatar" alt="" />
                <span>{{ formatNickname(item.member.nickname) }}</span>
              </div>
              <div class="body">
                <div class="score">
                  <i
                    v-for="score in item.score"
                    :key="score + 's'"
                    class="iconfont icon-star-fill"
                  ></i>

                  <i
                    v-for="score in 5 - item.score"
                    :key="score + 'd'"
                    class="iconfont icon-star"
                  ></i>
                  <span
                    class="attr"
                    v-for="(specs, i) in item.orderInfo.specs"
                    :key="i"
                  >
                    {{ specs.name }} : {{ specs.nameValue }}
                  </span>
                </div>
                <div class="text" v-text="item.content"></div>
                <goods-comment-image
                  v-if="item.pictures.length"
                  :pictures="item.pictures"
                ></goods-comment-image>
                <div class="time">
                  <span>{{ item.createTime }}</span>
                  <span class="zan"
                    ><i class="iconfont icon-like"></i
                    >{{ item.praiseCount }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="pagintion" v-if="commentList.pages > 0">
          <n-pagination
            @update:page="changePage"
            v-model:page="reqParams.page"
            :page-count="Math.ceil(commentList.counts / 10) || 1"
          />
        </div>
        <div v-else class="comment-null">
          <img
            src="@/assets/images/1309ce94-6a0e-4e39-ac80-e2d96863c1cc.png"
            alt=""
          />
          <p>暂时还没有人评论呢！</p>
        </div>
      </div>
    </n-spin>
  </transition>
</template>

<style scoped lang='less'>
.comment-null {
  height: 200px;
  width: 100%;
  border-top: 1px solid #f5f5f5;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  img {
    height: 150px;
    width: 150px;
    object-fit: cover;
  }
  p {
    padding-top: 10px;
    font-size: 14px;
    font-weight: 600;
  }
}
.pagintion {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.goods-comment {
  .head {
    display: flex;
    padding: 30px 0;
    .data {
      width: 340px;
      display: flex;
      padding: 20px 20px 20px 0px;
      p {
        flex: 1;
        text-align: center;
        span {
          display: block;
          &:first-child {
            font-size: 32px;
            color: @priceColor;
          }
          &:last-child {
            color: #999;
          }
        }
      }
    }
    .tags {
      flex: 1;
      display: flex;
      border-left: 1px solid #f5f5f5;
      .dt {
        font-weight: bold;
        width: 100px;
        text-align: right;
        line-height: 42px;
      }
      .dd {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        > a {
          width: 132px;
          height: 42px;
          margin-left: 20px;
          margin-bottom: 20px;
          border-radius: 4px;
          border: 1px solid #e4e4e4;
          background: #f5f5f5;
          color: #999;
          text-align: center;
          line-height: 40px;
          &:hover {
            border-color: @xtxColor;
            background: lighten(@xtxColor, 50%);
            color: @xtxColor;
          }
          &.active {
            border-color: @xtxColor;
            background: @xtxColor;
            color: #fff;
          }
        }
      }
    }
  }
  .sort {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    margin: 0 20px;
    color: #666;
    > span {
      margin-left: 20px;
    }
    > a {
      margin-left: 30px;
      &.active,
      &:hover {
        color: @xtxColor;
      }
    }
  }
}
.list {
  padding: 0 20px;
  .item {
    display: flex;
    padding: 25px 10px;
    border-bottom: 1px solid #f5f5f5;
    .user {
      width: 160px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
      }
      span {
        padding-left: 10px;
        color: #666;
      }
    }
    .body {
      flex: 1;
      .score {
        line-height: 40px;
        .iconfont {
          color: #ff9240;
          padding-right: 3px;
        }
        .attr {
          padding-left: 10px;
          color: #666;
        }
      }
    }
    .text {
      color: #666;
      line-height: 24px;
    }
    .time {
      color: #999;
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
    }
  }
}
</style>